<template>
    <!-- 
      v-for 遍历对象数组：
      语法：v-for="item in list"
        - item：当前遍历到的对象元素
        - list：要遍历的对象数组
      
      :key 属性：
        - 此处使用对象的id作为key（推荐做法）
        - 因为id是唯一且稳定的，比index更适合作为标识
        - 确保列表更新时Vue能正确识别每个元素，优化性能
    -->
    <div v-for="item in list" :key="item.id">
        <!-- 访问对象的属性：通过点语法(item.id, item.name)获取值 -->
        id：{{item.id}}---姓名：{{item.name}}
    </div>
</template>

<script setup>
// 导入reactive函数，用于创建响应式数组
import { reactive } from 'vue'

// 创建响应式对象数组list
// 每个元素是一个包含id和name属性的对象
// reactive会使数组及内部对象的所有属性都具有响应性
const list = reactive([
    {id:1, name:'张三'},
    {id:2, name:'李四'},
    {id:3, name:'王五'}
])

/* 
  对象数组渲染要点：
  1. 遍历对象数组时，item代表数组中的每个对象
  2. 通过"item.属性名"访问对象的具体属性
  3. 推荐使用对象的唯一标识（如id）作为key，而非index
  4. 当数组中的对象属性发生变化，或数组结构改变时，视图会自动更新
  5. 这种方式适合渲染表格数据、列表项等包含多字段的场景
*/
</script>
    